<template>
  <div style="width: 100%;height: 100%">
    <el-page-header @back="goBack" content="问卷数据页面" style="margin-left: 10px;margin-top: 20px">
    </el-page-header>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span style="font-size: 30px;color: #409EFF">{{ this.sheetData.theme }}</span>
      </div>
      <div style="width: 80%;margin: 0 auto;">
        <div style="width: 100%">
          <div class="video_img_div">
            <p style="text-indent: 2em">{{ this.sheetData.content }}</p>
          </div>
          <div class="video_img_div" v-if="isVideo_Pic(this.sheetData.fileSrc)==-1">
            <video controls="controls"
                   :src="this.$store.state.fileBaseSrc+this.sheetData.fileSrc"
                   style="width: 100%;height: 100%;object-fit: fill"
                   autoplay="autoplay"
                   loop="loop"
                   v-if="isVideo_Pic(this.sheetData.fileSrc)==0"
            >
            </video>
            <el-image :src="this.$store.state.fileBaseSrc+this.sheetData.fileSrc"
                      v-if="isVideo_Pic(this.sheetData.fileSrc)==1"
                      style="width: 100%;max-height: 400px;overflow: auto"
                      muted="true"
            >
            </el-image>
            <hr>
          </div>
          <div class="video_img_div">
            <div v-for="(item,index) in this.sheetData.topics" :key="index">
              <p>{{ index + 1 + '. ' + item.title }}</p>
              <div>
                <el-input v-if="item.answerType == '0'"
                          type="textarea"
                          v-model="replayData.type0[index]"
                >
                </el-input>
                <el-radio v-if="item.answerType == '1'"
                          v-for="(answer,index2 ) in  item.answers"
                          :key="index2"
                          :label="answer.id"
                          v-model="replayData.type1[index]"
                >
                  {{ answer.title }}
                </el-radio>
                <el-checkbox v-if="item.answerType == '2'"
                             v-for="(answer,index3 ) in  item.answers"
                             :key="index3"
                             :label="answer.id"
                             v-model="replayData.type2"
                >
                  {{ answer.title }}
                </el-checkbox>
              </div>
            </div>
            <br>
            <br>
            <el-button @click="submit()">提交</el-button>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "answerSheet",

  data() {
    return {
      sheetData: {},
      replayData: {
        textId: [],
        type0: [],
        type1: [],
        type2: []
      },
    }
  }, methods: {
    arrayFilter(array) {
      for (let i = 0, len = array.length; i < len; i++) {
        if (array[i] == null || array[i] == '' || array[i] === undefined) {
          array.splice(i, 1);
          i--;
          len--;
        }
      }
    },
    goBack() {
      console.log('go back');
      this.$router.go(-1)
    },
    submit() {
      let textId = this.replayData.textId.concat()
      let type0 = this.replayData.type0.concat()
      let type1 = this.replayData.type1.concat()
      let type2 = this.replayData.type2.concat()
      this.arrayFilter(type1);
      this.arrayFilter(type0);
      this.arrayFilter(type2);
      this.$http.post("answer/replay", {
        userId: this.$store.state.userId, questionId: this.$route.params.id,
        textId: textId, type0: type0, type1: type1, type2: type2
      }).then(res => {
        if (res.flag == true) {
          console.log(res.message)
          this.$notify({
            title: '消息',
            message: '提交成功',
            type: 'success'
          });
          if (this.$store.state.userId != '') {
            this.$router.push('/survey/question');
          }
        } else {
          this.$notify({
            title: '消息',
            message: '提交失败',
            type: 'error'
          });
        }
      })
    },
    isVideo_Pic(str) {
      if (str == null) return -1;
      let strings = str.split('.');
      console.log(strings[1]);
      let string = strings[strings.length - 1];
      if (string == 'mp4') {
        return 0;
      } else if (string == 'png' || string == 'jpg') {
        return 1
      } else
        return 99
    }
    ,
    refreshData(id) {
      this.$http.get("question/paper/" + id).then(resp => {
        if (resp.flag == true) {
          console.log(resp.message);
          this.sheetData = resp.data;
          let len = 0;
          for (let i = 0; i < resp.data.topics.length; i++) {
            if (resp.data.topics[i].answerType == '0') {
              this.replayData.textId[len] = resp.data.topics[i].id;
              len++;
            }
          }
          console.log(this.replayData.textId)
        }
      })
    },
  },
  created() {
    this.refreshData(this.$route.params.id)
  },
  mounted() {
    if (window.sessionStorage.getItem('token') == null || window.sessionStorage.getItem('token') == "") {
      console.log("没有token");
    }
  }
}
</script>

<style scoped>

.video_img_div {
  width: 600px;

  margin: 0 auto;
}

.clearfix {
  text-align: center;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.box-card {
  width: 60%;
  margin: 20px auto 0;
}
</style>